<template>
  <section>
    <el-row>
      <el-button size="mini" @click="addEntryBtn">新建入库单</el-button>
      <el-table :data="godownEntryList" v-show="godownEntryList">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="data.departmentName" label="所处部门">
        </el-table-column>
        <el-table-column prop="title" label="入库商品名称">
        </el-table-column>
        <el-table-column prop="stockInType.name" label="入库类型" >
        </el-table-column>
        <el-table-column label="操作" width="255">
          <template slot-scope="scope">
            <el-tooltip content="导入库存">
              <el-button type="primary" size="mini" @click="importToStock(scope)">入库</el-button>
            </el-tooltip>
            <el-button type="primary" size="mini" @click="delToStock(scope)" :type="scope.row.edit?'':'danger'">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-dialog title="入库单" :visible.sync="showGodownEntryItemDialog" v-loading="loading">
      <el-row v-if="currGodownEntry">
        <el-col :span="2">来源：</el-col><el-col :span="5">{{currGodownEntry.data.companyName}}/{{currGodownEntry.data.departmentName}}</el-col>
        <el-col :span="2">商品：</el-col><el-col :span="5">{{currGodownEntry.title}}</el-col>
      </el-row>
      <el-row>
        <el-table :data="godownEntryItems" ref="sepcTable">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="sn" label="商品编码">
          </el-table-column>
          <el-table-column prop="title" label="规格描述">
          </el-table-column>
          <el-table-column prop="unit" label="单位">
            <template slot-scope="scope">
              <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.unit"></el-input>
              <div v-if="!scope.row.edit">{{scope.row.unit}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="num" label="入库量">
            <template slot-scope="scope">
              <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.num"></el-input>
              <div v-if="!scope.row.edit">{{scope.row.num}}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="155">
            <template slot-scope="scope">
              <el-button :type="scope.row.edit?'success':'primary'" @click='confirmBtn(scope.row)'
                         size="mini" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
              <el-button @click='delGodwonEntryItem(scope)' size="mini" :type="scope.row.edit?'':'danger'">{{scope.row.edit?'取消':'删除'}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row style="margin-top:10px;">
        <el-button @click="toggleSelection(godownEntryItems)" size="mini">反选</el-button>
        <el-button @click="toggleSelection()" size="mini">取消选择</el-button>
        <span style="margin:0 10px;color:#aaa;">|</span>
        <!--<el-button @click="batchCreateSn" size="mini">生成编号</el-button>-->
        <el-button @click="saveGodwonEntry(godownEntryItems)" size="mini">保存并入库</el-button>
      </el-row>
    </el-dialog>
    <el-dialog title="创建" :visible.sync="showNewDialog" v-loading="loading">
      <new-godown-entry v-on:cancel="cancelDialog"></new-godown-entry>
    </el-dialog>
  </section>
</template>

<script>
  import newGodownEntry from './inbound/newInbound'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import DateFormat from '@/common/date-formater'
  import schedule from "../../sdk/api/schedule"
  import department from "../../sdk/api/department"
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "stockManagement",
    components:{newGodownEntry},
    data() {
      return {
        showNewDialog:false,
        loading:false,
        totalPage:0,
        godownEntryList:null,
        selCompany:null,
        showGodownEntryItemDialog:false,
        godownEntryItems:null,
        currGodownEntry:null,

      }
    },
    created(){
      //获取入库单列表
      this.getGodownEntryList()
    },
    computed:{
    },
    watch:{
      selCompany(nv,ov){
        if(nv){
          this.getDepartmentList(nv)
        }
      },
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      addEntryBtn(){
        console.log('新建入库的')
        this.currGodownEntry={}
        this.showNewDialog=true
      },
      cancelDialog(){
        this.showNewDialog=false
        this.getGodownEntryList()
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.sepcTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.sepcTable.clearSelection();
        }
      },
      saveGodwonEntry(items){
        console.log('保存并入库——1——————',items)
        let data = this.judgmentSn(items)
        console.log(data)
        let tmp =[]
        for(let i=0;i<items.length;i++){
          let item = items[i]
          for(let key in item){
            if(item[key] === ''){
              tmp.push(i)
            }
          }
        }
        console.log('保存并入库2————————',tmp)
        if(tmp.length >0){//判断入库单内容是否完整
          this.$message({type:'error',message:tmp+'项内，有未填完的选项'})
          return
        }

        console.log('保存并入库3————————',this.currGodownEntry)
        if(this.currGodownEntry.state === 1){//判断入库单可否入库
          this.$message({type:'error',message:"该入库单已入库!"})
        }else {
          this.loading=true
          this.importStockList(this.currGodownEntry.id)
        }
        this.showGodownEntryItemDialog=false
      },
      importStockList(godownEntryId){
        this.fetch({name:"importStockList",data:{godownEntryId}})
          .then(res=>{
            console.log(res)
            this.loading=false
            this.$message({type:'success',message:'导入成功'})
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getGodownEntryList(){
        this.fetch({name:"getGodownEntryList"})
          .then(res=>{
            console.log(res)
            this.godownEntryList = res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      createStock(data){
        this.fetch({name:"createStock",data:data})
          .then(res=>{
            console.log(res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      importToStock(scope){
        console.log(scope.row.godownEntryItems)
        this.currGodownEntry = scope.row
        this.getGodownEntryItemList(scope.row.id)
        this.showGodownEntryItemDialog = true
      },
      delToStock(scope){
        console.log(scope)
        //没有删除入库单

        return
        this.fetch({name:"deleteGodownEntry",data:{id:scope.row.id}})
          .then(res=>{
            console.log(res)
            this.godownEntryList.splice(scope.$index,1)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getGodownEntryItemList(id){
        this.fetch({name:"getGodownEntryItemList",data:{godownEntryId:id}})
          .then(res=>{
            console.log(res)
            this.godownEntryItems = res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      judgmentSn(res){
        let obj ={}
        res.map(function (item){
          if(obj[item.sn]){
            obj[item.sn] = obj[item.sn] + '/'+ item.title
          }else
            obj[item.sn] = item.title
        })
        let tmp = Object.keys(obj).map(function(item){
          return {
            sn: item,
            title : obj[item]
            // data : obj[item].split(',')
          }
        });
        return tmp
      },
      makeFormData(scope){
        console.log(scope)
        let tmpData = {
          stockInTypeId:this.currGodownEntry.stockInType.id,
          godownEntryId:this.currGodownEntry.id,
          num:scope.row.num,
          unit:scope.row.unit,
          sn:scope.row.sn,
          data:scope.row.data}
        return tmpData
      },
      confirmBtn(row){
        console.log(row)
        if(row.edit === undefined){
          Vue.set(row,'edit',true)//后续添加属性，需要vue联动
          return
        }
        if(row.edit){
          this.loading=true
          this.updateGodownEntryItem(row)
        }else {
          row.edit=true
        }
      },
      confirmGodwonEntryItem(scope){
        console.log(scope)
        if(scope.row.edit && scope.row.edit === true){//目前是编辑状态
          //组装sku等data
          let data = this.makeFormData(scope)
          console.log(data)
          //判断是否新创建
          if(scope.row.id){//非新建，有id，要更新
            console.log('要更新')
            data.id=scope.row.id
            this.updateGodownEntryItem(scope.row,data)
          }
          else {//新建的，有edit//保存新
            this.createGodownEntryItem(scope.row,data)
          }
        }else {
          console.log('点之前非编辑，改成编辑')
          //点击之前是非编辑状态，改成编辑状态
          if(scope.row.edit === undefined){
            Vue.set(scope.row,'edit',true)//后续添加属性，需要vue联动
          }else {
            scope.row.edit = true
          }
        }
      },
      createGodownEntryItem(row,data){
        this.fetch({name:"createGodownEntryItem",data:data})
          .then(res=>{
            console.log(res)
            row.edit = !row.edit
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      updateGodownEntryItem(row){
        console.log(row)
        // this.fetch({name:"updateGodownEntryItem",data:data})
        //   .then(res=>{
        //     console.log(res)
        //     row.edit = !row.edit
        //   })
        //   .catch(err=>{
        //     console.log(err)
        //     errHandler.handle(this,err)
        //   })
      },
      delGodwonEntryItem(scope){
        console.log(scope)
        if(scope.row.edit){//如果是true，就是取消
          if(scope.row.id){
            scope.row.edit = false
          }else {
            this.specificationDetail.splice(scope.$index,1)
          }
        }else {//如果是false，就是删除
          if(scope.row.id){
            this.fetch({name:"deleteGoodsSku",data:{id:scope.row.id}})
              .then(res=>{
                console.log(res)
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          }else {
            console.log('没有id号')
          }
        }
      },
      deleteGodownEntryItem(){
        this.fetch({name:"deleteGodownEntryItem",data:data})
          .then(res=>{
            console.log(res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>

</style>
